<template>
    <div>
        <my-hearder></my-hearder>
        <main style="background-color: #f2f2f2;margin: 0;padding: 0;">
        <div class="t-h">
            <div>
                <a href=""><img src="/img/logo.png" alt=""></a>
                <ul>
                    <li><input type="text" :placeholder="fsc==''?'输入小区名开始找房吧！！!':fsc" v-model='xq'> <div class='shuchu' :style="{display:(ru?'block':'none')}"><ul ><li :style="{color:item=='没有找到您要的小区'||item=='换个小区试试吧！！！'?'red':'black'}" @click='jing' @mouseenter='jin' v-for='item ,i of shuchu' :key='i'>{{item}}</li></ul></div></li>
                    <li><span @click='sgo'>搜索</span></li>
                    <li><span>地图找房</span></li>
                </ul>

            </div>
        </div>
        <div>
            <div style="width:1190px;margin: 0 auto;height: 45px;background-image: url(/img/dizhi3x.png);background-repeat: no-repeat;background-position: left;">
                <ul class="tou" style="margin: 0;padding: 0;list-style: none;">
                    <li><img src="" alt=""><span>巴乐兔{{city}}站</span></li>
                    <li>></li>
                    <li><span id='text2'>{{xdq?xdq+'出租房':'立即找房'}}</span></li>
                    <li :style="{width:'10px','margin-left':'10px',display:(this.xjd?'inline-block':'none')}">></li>
                    <li :style="{'margin-left':'10px',display:(this.xjd?'inline-block':'none')}">{{xjd}}出租房</li>
                </ul>
            </div>
        </div>
        <div style="width: 1190px;margin: 0 auto;" class="m-c">
            <div>
                <ul @click="find">
                    <li :class="{zhong:zz}">区域找房</li>
                    <li :class="{zhong:!zz}">地铁找房</li>
                    <a style="line-height:42px;font-size:16px;display:inline-block;padding:0 20px">地图找房</a>
                </ul>
                <div>
                    <ul>
                        <li v-show="zz">
                            <h5>区域:
                            </h5>
                            <div id='quyu' @click="quyu" ><a href="javascript:;">不限</a>
                                <a  :class="{xxxx:xxx==i}"  :data-x='i'  v-for="str,i of qu" :key="i" href="javascript:;" >{{str.qname}}</a>
                                </div>
                        </li>
                        <li v-show="!zz">
                            <h5>地铁:
                            </h5>
                            <div @click="sub" class="diyi"><a href="# ">不限</a>
                                <a @click="zzz" :class="{xxx:xxx==i}"  :data-x='i' v-for="str ,i of subway" :key="i" href="javascript:;">{{str.wxian}}</a>
                            </div>
                        </li>
                     <li v-if="qq"  style="font-size:14px;margin:0 45px;height:auto;background-color:#f9f9f9;width:1085px;border:1px solid #ededed;border-radius: 5px;">
                            <span @click='xall' style="display:inline-block;padding:0 20px">全部</span>
                            <span class="searchquyu" @click="searchquyu" :style="{display:'inline-block',padding:(str.length==1?'0':'0 10px'),color:(str.length==1||i==red?'red':''),'font-weight':(str.length==1?'bold':'')}" v-for="str,i of qu[xxx].qdao.split(',')" :key="i" :data-num='i'>{{str}}</span>
                        </li>
                        <li v-if="dd"  style="font-size:14px;margin:0 45px;height:auto;background-color:#f9f9f9;width:1085px;border:1px solid #ededed;border-radius: 5px;">
                            <span style="display:inline-block;padding:0 20px">全部</span>
                            <span  style="display:inline-block;padding:0 20px" v-for="str,i of subway[xx].wname.split(',')" :key="i" href="">{{str}}</span>
                        </li>
                        <li class="er">
                            <h5>租金:

                            </h5>
                            <div > <a href="# ">不限</a>
                            <a  href="javascript:;" :class="{xuanzhong:money[i].status}" @click="bg(str.i)" v-for="str,i of money" :key="i">{{str.i}}</a>
                                <span style="font-size:18px;display: table;"><input type="text " v-model='xjg'> - <input type="text" v-model='djg'></span>
                                <a class="btn " href="javascript:; " @click='xzjg'>确定</a>
                            </div>

                        </li>
                        <li>
                            <h5>
                                类型:
                            </h5>
                            <div> <a href="javascript:;">不限</a>
                            <a href="javascript:;" :class="{xuanzhong:type[i].status}" @click="bg1(str.i)" v-for="str,i of type" :key="i">{{str.i}}</a>
                                </div>

                        </li>
                        <li>
                            <h5>户型:</h5>
                            <div> <a href="javascript:;">不限</a>
                               <a href="javascript:;" :class="{xuanzhong:shi[i].status}" @click="bg2(str.i)" v-for="str,i of shi" :key="i">{{str.i}}</a>
                               </div>
                        </li>

                        <li>
                            <h5>特色:</h5>
                            <div>
                                 <a href="javascript:;">不限</a>
                                 <a href="javascript:;" :class="{xuanzhong:style[i].status}" @click="bg3(str.i)" v-for="str,i of style" :key="i">{{str.i}}</a>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="chose ">
                    <span>已选:</span>
                    <div class="tag">
                        <ul>
                            <li  v-for="str,i of result" :key="i"><span>{{str}}</span> <span :data-num='str' @click="cha" >.</span></li>
                        </ul>
                    </div>
                    <span @click="clear"><span>&nbsp;</span>一键清空</span>
                </div>
                <div class="m-di ">
                    <ul>
                        <li>排序:</li>
                        <li>综合</li>
                        <li>价格</li>
                        <li>面积</li>
                        <span :class="{no:!wu}">已为您找到<span> {{num}}套 </span>房源</span>
                        <div @click='small'><span :class="{big:big,big2:!big}" :style="{color:(big?'#ee3843':'#959595')}">.</span><a href="javascript:;" :style="{color:(big?'red':'black')}">列表</a><span :class="{small:!big,small2:!big}" :style="{color:(!big?'#ee3843':'#959595')}">.</span><a href="javascript:;" :style="{color:(!big?'red':'black')}">大图</a></div>
                    </ul>
                </div>
            </div>


        </div>
        <div class="m-center ">
            <div class="clear big">
                <div :style="{display:(big?'block':'none')}">
                    <ul>
                        <li :class="{no:wu}" style="height:48px;line-height:48px;position: relative"><img style="margin-left:260px" src="/img/baletu_image48.png" alt=""><span style="font-size:16px; position: absolute;top:20px;margin-left: 10px">未找到对应的房源，推荐以下房源给你哦~</span></li>
                        <li  v-for="str,i of h_data1" :key="i" >
                            <div>
                                <a href=""><img v-lazy="pic[i].split('|')[0]" alt=""></a>
                                <div></div>
                            </div>
                            <div>
                             <h3><router-link  :to="{name:'detail',query:{lid:h_data1[i].hid}}">{{h_data1[i].sname}} {{h_data1[i].hfloor.substr(0,h_data1[i].hfloor.indexOf('/'))}}楼</router-link></h3>
                                <span>{{h_data1[i].hprice}}</span>
                                <p>{{h_data1[i].qname}} - {{h_data1[i].s_yu}} | {{h_data1[i].htype}} | {{h_data1[i].hxing}} | {{h_data1[i].harea}}M²</p>
                                <p><span style="color:white">.</span> {{h_data1[i].h_dtinfo}}</p>
                                <div >
                                    <span v-for="str of h_tag[i].split('/')" :key="str">{{str}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                  
                </div>
                <div :style="{display:(big?'block':'none')}">
                    <div>
                        <img src="/img/listbanner.png " alt=" ">
                        <h2>优质房源推荐</h2>
                        <div>
                            <ul>
                                <li>
                                    <div><img src="/img/oss_5acc2fa9a3e4e.png@!380_280.jpg " alt=" "></div>
                                    <div>
                                        <h3>格子公寓</h3>
                                        <span>900元</span>
                                        <p>方新村 公寓 | 1室0厅1卫 | 25M²</p>
                                        <div>
                                            <span>新上架</span>
                                            <span>独卫</span>
                                            <span>保洁服务</span>
                                            <span>新上架</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div><img src="/img/oss_5db2819ca38d0.jpg@!380_280.jpg " alt=" "></div>
                                    <div>
                                        <h3>名京九合院精品单身公寓</h3>
                                        <span>600元</span>
                                        <p>南稍门 公寓 | 1室0厅1卫 | 40M²</p>
                                        <div>
                                            <span>新上架</span>
                                            <span>独卫</span>
                                            <span>保洁服务</span>
                                            <span>新上架</span>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 点击大图 -->
                <div class="bbg" :style="{display:(!big?'block':'none')}">
                    <ul>
                        <li v-for="str,i of h_data1" :key="i">
                            <div><img v-lazy="pic[i].split('|')[0]" alt="" style="width:380px;height:280px">
                                <div>{{h_data1[i].sname}} {{h_data1[i].hfloor.substr(0,h_data1[i].hfloor.indexOf('/'))}}楼</div>
                            </div>
                            <div><span style="color:white">.</span><router-link :to="{name:'detail',query:{lid:h_data1[i].hid}}" style='    color: #979798;'><span>{{h_data1[i].h_dtinfo}}</span></router-link><span>2600元</span></div>
                            <h3> <span v-for="str of h_tag[i].split('/')" :key="str">{{str}}</span></h3>
                        </li>
                    </ul>
                </div>
              
            </div>   <el-pagination background :current-page='count'
  :page-size='12'
  @current-change='fy'
  layout="prev, pager, next"
  :total="num
  ">
</el-pagination>
        </div>
    </main>
        <my-footer></my-footer>
    </div>
</template>
<script>
import {getIndex} from '../assets/js/apis/index.js'
import MyHearder from '../components/MyHearder'
import MyFooter from '../components/MyFooter'
import {mapState} from 'vuex'
export default {
    components:{MyHearder,MyFooter},
    computed:{ ...mapState(['city','cid'])},
    data(){
        return{
            xjg:'',
            djg:'',
            xxx:-1,
            ru:false,
            big:true,
            count:1,
            money:[{i:'1500元以下',status:false,h_price:'hprice<1500'},{i:'1500-2000元',status:false,h_price:'hprice between 1500 and 2000'},{i:'2000-3000元',status:false,h_price:'hprice between 2000 and 3000'},{i:'3000-5000元',status:false,h_price:'hprice between 3000 and 5000'},{i:'5000元以上',status:false,h_price:'hprice>5000'},],
            type:[{i:'合租',status:false,h_type:'htype="合租"'},{i:'整租',status:false,h_type:'htype="整租"'}],
            shi:[{i:'一室',status:false,h_shi:'hxing like "1室%"'},{i:'二室',status:false,h_shi:'hxing like "2室%"'},{i:'三室',status:false,h_shi:'hxing like "3室%"'},{i:'四室及以上',status:false,h_shi:'hxing not like "1室%" and hxing not like "2室%" and hxing not like "3室%" '},],
            style:[{i:'独卫',status:false,h_style:'htags like "%独卫%"'},{i:'租金月付',status:false,h_style:'htags like "%租金月付%"'},{i:'近地铁',status:false,h_style:'htags like "%近地铁%"'},{i:'朝南',status:false,h_style:'htags like "%朝南%"'},{i:'带阳台',status:false,h_style:'htags like "%带阳台%"'},{i:'精装修',status:false,h_style:'htags like "%精装修%"'},{i:'家电齐全',status:false,h_style:'htags like "%家电齐全%"'},{i:'电梯房',status:false,h_style:'htags like "%电梯房%"'}],
            num:0,
            h_data:[],
            h_data1:[],
            h_tag:[],
            wu:true,
            tiaojian:[],
            res:'',
            status:true,
            result:[],
            pic:[],
            qu:[],
            qq:false,
            dd:false,
            xx:'',
            subway:[],
            zz:true,
            red:'',
            xdq:'',
            xjd:'',
            xiaoqu:[],
            xq:'',
            shuchu:[],
            fsc:'',
            fsx:false,
        }
    },
    methods:{
        zzz(e){
          this.xxx=e.target.dataset.x 
        },
        small(e){
           if(e.target.nodeName=='A'){
               if(e.target.innerText=='大图'){
                   this.big=false;
               }else{
                   this.big=true;
               }
           }
        },
        sgo(){
            this.ru=false;
          this.shai();
        },
        xall(){
           this.xjd='';
           this.red='';
           this.shai();
        },
        xzjg(){
            this.tiaojian.p_price='';
            for(var p of this.money){
                p.status=false;
            }
            if(Number(this.xjg)>Number(this.djg)){
                alert('a')
            }
        // this.shai();
        },
        sub(e){
            if(e.target.nodeName=='A'){
             this.dd = e.target.innerText=='不限'?false:true;
              this.xx = e.target.dataset.x;
              if(e.target.innerText=='不限'){
                  this.xxx=-1;
              }
              }
            
        },
        find(e){
            if(e.target.nodeName=='LI'){
                this.zz = e.target.innerText=='区域找房'?true:false
                this.qq=false;
                this.dd=false;
                    this.xxx=-1;

            }
        },
        quyu(e){
            if(e.target.nodeName=='A'){
            this.qq = e.target.innerText=='不限'?false:true;
           this.xxx=e.target.dataset.x
            if(this.xdq!=e.target.innerText){
                console.log(this.qu,e.target)
                this.xjd=''
                this.red=''
                this.xdq = this.qq?e.target.innerText:'';
                this.shai()
            }
            
            if(e.target.innerText=='不限'){
                this.xxx=-1;
                this.xdq='';
                this.xjd='';
                this.shai();
            }
        }    
    },
        clear(){
         this.tiaojian.p_price=[];
         this.tiaojian.p_shi=[];
         this.tiaojian.p_style=[];
         this.tiaojian.p_type=[];
         this.xdq='';
         this.xjd='';
         this.xq='';
         this.shai();
         this.xxx=-1;
         this.qq=false;
         this.dd=false;
         for(var i of this.money){
             i.status= false
         }
         for(var i of this.style){
             i.status= false
         }
         for(var i of this.shi){
             i.status= false
         }
         for(var i of this.type){
             i.status= false
         }
        },
        cha(e){
            var xx=[]
            for(var i of this.money){
    i.i.indexOf(e.target.dataset.num)!=-1?this.bg(e.target.dataset.num) :''
            
            }
            for(var i of this.type){
              i.i.indexOf(e.target.dataset.num)!=-1? this.bg1(e.target.dataset.num):''
            }
            for(var i of this.shi){
              i.i.indexOf(e.target.dataset.num)!=-1?this.bg2(e.target.dataset.num):''
            }
            for(var i of this.style){
              i.i.indexOf(e.target.dataset.num)!=-1?this.bg3(e.target.dataset.num):''
            }
            if(e.target.dataset.num==this.xq){
                this.xq='';
                this.shai()
            }
            if(e.target.dataset.num==this.xdq){
              this.xdq = '';
              this.xjd = '';
              this.shai();
                this.qq=false;
                this.dd=false;
             
                
         return
        }
        if(e.target.dataset.num==this.xjd){
           this.red=''
            //    this.xxx=0;
            this.xjd='';
            this.shai();
            
        }
        },
        fy(ye){
            this.count=ye;
            this.axios.get(`/v1/house/show3`,{params:{'num':ye,res:this.res,cid:this.cid}}).then(res=>{
               this.h_data1=res.data;
                this.$router.push({ name:'search',query: { ye: ye }})
                this.pic=[];
               this.h_tag=[]
               for(var i of this.h_data1){
                   this.h_tag.push(i.htags);
                   this.pic.push(i.purl)
               }
            })

           window.scrollTo({ 
            top: 0, 
             behavior: "auto" })
        },
        searchquyu(e){
           if(e.target.innerText.length!=1){
                this.red = e.target.dataset.num;
                this.xjd = e.target.innerText;
                this.shai();
            }
            
        },
     shai(){
         this.count=1;
         this.res=''
         this.result=[];
         if(this.xdq){this.result.push(this.xdq)}
        if(this.xjd){this.result.push(this.xjd)}
        if(this.xq){this.result.push(this.xq)} 
        console.log(this.tiaojian)
         for (var i in this.tiaojian) {
            if (this.tiaojian[i].length) {
                for (var j = 0; j < this.tiaojian[i].length; j++) {
                      this.result.push(this.tiaojian[i][j][1])
                    if (this.tiaojian[i].length == 1 || !j) {
                        this.tiaojian[i].length !=1?this.res += ' (' + this.tiaojian[i][j][0]:this.res += ' (' + this.tiaojian[i][j][0] + ' )'
                    } else if( this.tiaojian[i].length-1==j) {
                        i=='p_style'? this.res += ' and ' + this.tiaojian[i][j][0] + ' )': this.res += ' or ' + this.tiaojian[i][j][0] + ' )'
                    }else{
                        i=='p_style'?this.res += ' and ' + this.tiaojian[i][j][0]: this.res += ' or ' + this.tiaojian[i][j][0]
                    }
                }
                this.res += ' and '
            }
        }
        this.res = this.res.slice(1, this.res.lastIndexOf('and'));
        this.res = this.xdq!=''&&this.res?`${this.res} and qname='${this.xdq}' `:this.xdq!=''&&!this.res? ` qname='${this.xdq}' `:this.xdq==''&&this.res?this.res:'';
        this.res = this.xjd!=''?`${this.res} and s_yu='${this.xjd}' `:this.res;
        this.res = this.xq!=''?this.res?`${this.res} and sname='${this.xq}'  `:` sname='${this.xq}' `:this.res;
        console.log(this.res)
        console.log(this.res);
        this.axios.get("/v1/house/show2",{params:{res:this.res,cid:this.cid}}).then(res=>{
            console.log(res.data)
               if(!res.data.length){
                   this.status=false
                   this.wu=false;
                   this.axios.get("/v1/house/no",{params:{cid:this.cid}}).then((result)=>{
               this.h_data1=result.data;
               this.h_tag=[]
               this.pic=[]
               for(var i of this.h_data1){
                   this.h_tag.push(i.htags)
                    this.pic.push(i.purl)
               }
               this.status=true
    })    
               }else{
                   this.axios.get('/v1/house/num',{params:{res:this.res,cid:this.cid}}).then(result=>{
               this.num=result.data[0].count;
               this.h_data1=res.data;
                 this.wu=true; 
                 this.h_tag=[];
                 this.pic=[]
                 for(var i of this.h_data1){
                   this.h_tag.push(i.htags)
                   this.pic.push(i.purl)
               }
               })
               }
            })
            return

     },
     jin(e){
         this.fsc=e.target.innerText
         this.xq=''
     },
     jing(e){
         this.xq=e.target.innerText;
         this.ru=false;
     },
        bg(i){
            var str=[];
            for(var p of this.money){
                i==p.i?p.status=!p.status:''
                p.status?str.push([p.h_price,p.i]):''
            }
            this.tiaojian.p_price=str;
            this.shai();
            },
     
        bg1(i){
            var str=[];
            for(var p of this.type){
                i==p.i?p.status=!p.status:''
                p.status?str.push([p.h_type,p.i]):''
            }
            this.tiaojian.p_type=str;
            this.shai();
            },
            bg2(i){
            var str=[];
            for(var p of this.shi){
                i==p.i?p.status=!p.status:''
                p.status?str.push([p.h_shi,p.i]):''
            }
            this.tiaojian.p_shi=str;
            this.shai();
    },
            bg3(i){
                
               var str=[];
            for(var p of this.style){
                i==p.i?p.status=!p.status:''
                p.status?str.push([p.h_style,p.i]):''
            }
            this.tiaojian.p_style=str;
            this.shai();
            } ,
            qingqiu(){
             if(!this.cid==''){
               
         this.axios.get('v1/house/qu',{params:{cid:this.cid}}).then(res=>{
        this.qu=res.data;
    })
    this.axios.get('/v1/house/show1',{params:{cid:this.cid}}).then(res=>{
                    this.num=res.data[0].count;
        })
    this.axios.get('v1/house/sub',{params:{cid:this.cid}}).then(res=>{
        this.subway=res.data;
    })
      this.axios.get(`v1/house/xiaoqu?city=${this.city}`).then(res=>{
                this.xiaoqu=[];
                    for(var i of res.data){
                        this.xiaoqu.push(i.sname)
                    }
                 });
        this.axios.get("/v1/house/show3",{
    params:{'num':1,'cid':this.cid}
}).then((result)=>{
               this.h_data1=result.data;
               console.log(result.data)
               this.h_tag=[]
               this.pic=[]
               for(var i of this.h_data1){
                   this.h_tag.push(i.htags)
                   this.pic.push(i.purl)
               }
              
    })
        }}
    },
      watch:{
        city(){ 
            this.xxx=-1;
            this.wu=true;
            this.dd=false;
            this.zz=true;
            this.qq=false;
            this.xdq='';
            this.result=[]
           this.qingqiu();
           this.xq='';
           this.ru=false;
           this.fsc='';
        },
        xq(){
            if(!this.xq){return}
            this.shuchu=[];
            this.ru=true;
           var arr=[];
    for (var i = 0; i < this.xiaoqu.length; i++) {
        console.log(this.xiaoqu[i].match(this.xq))
      if (this.xiaoqu[i].match(this.xq) != null) {
        arr.push(this.xiaoqu[i]);
      }
    }
    this.shuchu=arr;
    if(!arr.length){
        this.shuchu=['没有找到您要的小区','换个小区试试吧！！！']
    }
        }
    },
    mounted(){
         getIndex(this.cid).then(res=>{
          console.log(res)
      })
        
        window.scrollTo({ 
            top: 0, 
             behavior: "auto" })
        if(this.$route.query.type==1){
            this.type[0].status=true;
           var arr = [];
           arr.push([this.type[0].h_type,this.type[0].i])
           this.tiaojian.p_type=arr;
           this.shai();
        }else if(this.$route.query.type==0){
            this.type[1].status=true;
           var arr = [];
           arr.push([this.type[1].h_type,this.type[1].i])
           this.tiaojian.p_type=arr;
           this.shai();
        }
        var ye1 = this.$route.query.ye;
        // this.count=ye;
        this.qingqiu();

        // this.fy()
    },
}
</script>
<style>
.m-c .diyi .xxx{
    color:red
}
main .m-c div .xxxx {
    color:red
}
.m-c .m-di .small {
    display: inline-block;
    width: 14px;
    line-height: 35px;
    height: 34px;
    background-image: url(/img/css_sprites.png);
    background-position: -44px -84px;
    background-repeat: no-repeat;
}
.m-c .m-di .small2 {
    display: inline-block;
    width: 14px;
    line-height: 35px;
    height: 34px;
    background-image: url(/img/css_sprites.png);
    background-position: -10px -84px;
    background-repeat: no-repeat;
}
.m-c .m-di>ul>div>span {
    display: inline-block;
    width: 14px;
    line-height: 35px;
    height: 34px;
    background-image: url(/img/css_sprites.png);
    background-position: -44px -84px;
    background-repeat: no-repeat;
}
.m-c .m-di .big2{
    background-image: url(/img/css_sprites.png);
    background-position: -113px -84px;
    background-repeat: no-repeat;
}
.m-c .m-di .big{
    background-image: url(/img/css_sprites.png);
    background-position: -78px -84px;
    background-repeat: no-repeat;
}
.m-c .diyi >a{
    width: auto;
    float: left;
    margin-left: 0px;
    text-decoration: none;
    font-size: 14px;
    color: #484848;
    background-image: none;
    padding-left: 15px;
}
.m-c .diyi>a:nth-child(2){
    margin-left: 0;
}
.m-c .tag>ul>li>span:last-child:hover{
       cursor: pointer;
    background-color: #f6f6f6;
}
main .el-pagination {
    white-space: nowrap;
    padding: 20px 0 0;
    color: #303133;
    font-weight: 400;
    text-align: center;
}
main .el-pagination.is-background .el-pager li:not(.disabled):hover{
    background-color: #f0f0f0;
    color:black
}
main .el-pagination.is-background .el-pager li{
    background-color: #fff;
}

main .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #ee3843;
    color:white
}
body {
    margin: 0;
    padding: 0;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tou li {
    font-size: 14px;
    /* float: left; */
    line-height: 45px;
    width: 100px;
    text-align: center;
    color: #666666;
    display: inline-block;
    margin-left: 10px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-m {
    background-color: #fff;
}

.main-b>div>ul>li {
    font-size: 15px;
    text-indent: 35px;
    height: 30px;
    line-height: 30px;
    width: 200px;
}

.main-b>div>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 300px;
}

.h_right ul {
    margin-left: -40px;
}

.main-b>div:nth-child(2)>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 150px;
}

.main-b>div:nth-child(2)>input:last-child {
    margin-left: 0;
    margin-right: 5px;
}

.main-b>div:nth-child(3)>div>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 150px;
    position: relative;
    z-index: 999;
}


/* .main-b div:nth-child(1) {
    margin-left: 2px;
} */
.no{
    display: none  !important;
}
.main-b>div {
    height: 80px;
    float: left;
    width: 394px;
    border-right: 1px solid #e5e5e5;
}

.main-b>div:last-child {
    border-right: 0;
}

.main-m>div>ul li {
    float: left;
    font-size: 17px;
    cursor: pointer;
    font-weight: 600;
    width: 50px;
    line-height: 75px;
    border-bottom: 4px solid red;
    padding: 0 10px;
}

.main-m>div>ul li:nth-child(2) {
    border-bottom: 2px solid transparent;
    font-weight: 500;
}



body header div div .h_left ul li:nth-child(3) div {
    position: absolute;
    width: 56px;
    height: 3px;
    bottom: 0;
    background-color: white;
}

.t-h {
    height: 60px;
    background-color: white;
}

.t-h div {
    width: 1190px;
    margin: 0 auto;
}

.t-h div a img {
    float: left;
    height: 50px;
    width: 102px;
    margin-top: 5px;
    line-height: 60px;
}

.t-h div ul {
    float: left;
    width: 950px;
    height: 50px;
    padding-top: 10px;
}

.t-h div ul li span {
    display: inline-block;
    width: 110px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: white;
  
}

.t-h div ul li:nth-child(2) {
    background-color: #ee3843;
    margin-left: 20px;
      font-size: 0;
}

.m-c div:nth-child(1)>ul>li {
    float: left;
    width: 116px;
    line-height: 42px;
    height: 42px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
}

.m-c div:nth-child(1)>ul .zhong {
    background-color: #ea3843;
    color: white;
}

.m-c div:nth-child(1)>ul {
    height: 42px;
    border-bottom: 2px solid red;
}

.m-c div>div {
    height: auto;
    border-bottom: 1px solid #ededed;
    padding: 10px 5px;
}

.m-c div>div>ul>li {
    height: 38px;
    line-height: 38px;
}

.m-c div>div>ul>li:nth-child(1)>div>a {
    float: left;
    margin-left: 0px;
    text-decoration: none;
    font-size: 14px;
    /* color: #484848; */
    background-image: none;
    padding-left: 15px;
}

.m-c div>div>ul>li>div>.btn {
    position: absolute;
    background-image: none;
    padding-left: 0;
    color: white;
    width: 50px;
    background-color: #626468;
    margin-top: 10px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    top: 1px;
    right: 65px;
}

.m-c div>div>ul .er >div {
    position: relative;
}

.m-c div>div>ul>li>div>.btn:hover {
    background-color: #ee3843;
    color: white;
    background-image: none;
}

.m-c div>div>ul>li>div a:first-child {
    width: 30px;
    padding-left: 0;
    background-image: none;
}

.m-c div>div>ul>li:nth-child(1)>div a:first-child+a {
    margin-left: 0;
}

.m-c div>div>ul>li>div a:first-child+a {
    margin-left: 15px;
}

.m-c .chose {
    position: relative;
    font-size: 15px;
    margin-left: 0px;
    padding-bottom: 16px;
}

.m-c .chose>span:first-child {
    display: inline-block;
    height: 20px;
    position: absolute;
    top: 13px;
    left: 45px;
}

.m-c .chose>span:last-child>span {
    line-height: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/img/css_sprites.png');
    background-repeat: no-repeat;
    background-position: -43px -53px;
}

.m-c .chose>span:last-child {
    color: grey;
    display: inline-flex;
    width: 100px;
    text-align: right;
    position: absolute;
    top: 13px;
    cursor: pointer;
}

.m-c .m-di {
    font-size: 15px;
    height: 58px;
    padding: 0;
}

.m-c .m-di>ul {
    width: 1100px;
    height: 58px;
    padding-left: 22px;
}

.m-c .m-di>ul>li:first-child {
    width: 80px;
}

.m-c .m-di>ul>li {
    float: left;
    width: 70px;
    text-align: center;
    line-height: 58px;
    height: 58px;
    border-right: 1px solid #ededed;
    font-weight: 600;
}

.m-c .m-di>ul>div {
    float: right;
    margin-left: 20px;
    width: 130px;
    height: 58px;
    line-height: 58px;
}

main .m-center {
    margin-top: 20px;
}

main .m-center>div {
    width: 1190px;
    margin: 0 auto;
    padding-bottom: 20px;
}
main .m-center>div::after{
    content: '';
    display: block;
    clear: both;
}
main .m-center>div>div:nth-child(1) {
    width: 900px;
}

a {
    text-decoration: none;
}

main .m-center>div>div:nth-child(1)>ul>li>div:first-child>a {
    display: inline-block;
    height: 160px;
    position: relative;
}

main .m-center>div>div:nth-child(1)>ul>li>div:first-child>a>div {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    width: 220px;
    height: 20px;
    background-color: rgba(99, 99, 97, .8);
    text-align: center;
    border-radius: 0 0 5px 5px;
    transition: .6s;
    line-height: 20px;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
}

p {
    margin: 0;
}

main .m-center>div>div:nth-child(1)>ul>li>div:first-child>a>img:hover+div {
    height: 20px;
    visibility: inherit;
    opacity: 1;
}

main .m-center>div>div:nth-child(1)>ul>li>div:first-child>a>img {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    border-radius: 5px;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child {
    width: 620px;
    height: 160px;
    padding-left: 20px;
    position: relative;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>h3 {
    margin: 0;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>span {
    position: absolute;
    top: 0;
    right: 0;
    color: #ee3843;
    font-size: 20px;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>p {
    font-size: 14px;
    margin: 10px 0;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>div>span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    background-color: #eef1f4;
    margin: 0 10px;
    color: #7f8c9c;
    text-align: center;
    font-size: 14px;
    padding: 0 5px;
    border-radius: 2px;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>div>span:first-child {
    margin-left: 0;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>p+p {
    color: grey;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>p+p>span {
    background-image: url('/img/css_sprites.png');
    background-repeat: no-repeat;
    background-position: -185px -105px;
    display: inline-block;
    width: 10px;
}

main .m-center>div>div:nth-child(1)>ul>li>div:last-child>h3>a {
    width: 500px;
    text-decoration: none;
    color: #484848;
    font-size: 20px;
}
main .m-center>div>div:nth-child(1)>ul>li>div {
    float: left;
    height: 160px;
    width: 220px;
}

main .m-center>div>div:nth-child(1)>ul>li {
    padding: 20px;
    width: 860px;
    height: 160px;
    background-color: #fff;
    border-top: 1px solid #ededed;
}

main .m-center>div>div:nth-child(1)>ul>li:first-child {
    border-top: 0;
}

main .m-center>div>div:nth-child(1)>ul>li:hover {
    background-color: #fbfbfb;
    cursor: pointer;
}

main .m-center>div>div {
    float: left;
}

main .m-center>div>div:nth-child(2) {
    width: 270px;
    padding-left: 20px;
    float: right;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li {
    width: 270px;
    /* height: 275px; */
    background-color: #fff;
    margin-bottom: 10px;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:first-child {
    width: 270px;
    height: 182px;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child {
    width: 250px;
    padding: 10px;
    position: relative;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child>h3 {
    width: 180px;
    margin: 0;
    font-size: 18px;
    color: #484848;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child>span {
    position: absolute;
    top: 10px;
    right: 10px;
    color: red;
    font-size: 20px;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child>div>span {
    display: inline-block;
    height: 24px;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    background-color: #eff6fa;
    border-radius: 2px;
    margin: 0 5px ;
    padding: 0 5px;

}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child>div>span:first-child {
    background-color: #ffeaea;
    color: #f7646e;
    margin: 0 5px 0 0;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:last-child>p {
    margin-top: 5px;
    font-size: 14px;
}

main .m-center>div>div:nth-child(2)>div>div>ul>li>div:first-child>img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}

main .m-center>div>div:nth-child(2)>div>h2 {
    margin: 10px 0;
    color: #484848;
    font-size: 20px;
}



/* .m-c .m-di>ul>div>span:first-child+a {
    color: #ee3843;
} */

/* .m-c .m-di>ul>div>span:first-child {
    background-image: url(/img/css_sprites.png);
    background-position: -78px -84px;
    background-repeat: no-repeat;
} */

.m-c .m-di>ul>div>a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
    color: #484848;
}

.m-c .m-di>ul>span {
    height: 100%;
    line-height: 58px;
    display: inline-block;
    padding-left: 180px;
}

.m-c .m-di>ul>span>span {
    color: #ff0000;
}

.m-c div>div>ul>li>div>span>input {
    border: 1px solid #dddddd;
    width: 50px;
    outline: none;
    padding: 1px 2px;
}

.m-c .m-di ul>li:nth-child(2) {
    color: #ee3843;
}

.m-c .m-di ul>li:nth-child(3),
.m-c .m-di ul>li:nth-child(4) {
    background-image: url('/img/gray_arrow_bottom.png');
    background-repeat: no-repeat;
    background-position: 50px 24px;
}

.m-c div>div>ul>li>div {
    width: 1000px;
    height: 38px;
    padding-left: 112px;
}


.m-c div>div>ul>li>div a:first-child:hover {
    background-image: none;
}

.m-c div>div>ul>li:nth-child(1)>div>a:hover {
    background-image: none;
}

.m-c div>div>ul>li>div>a:hover {
    color: #ee3843;
    /* background-image: url(/img/xuanzhong.png); */
}

.m-c div>div>ul>li>h5+a:hover {
    background-image: none;
}

.m-c div>div>ul>li:nth-child(1)>div>a {
    width: auto;
}

.m-c .ditie {
    display: none;
}

.m-c div>div>ul>li>div>a {
   
    background-repeat: no-repeat;
    background-position: left;
    width: 100px;
    float: left;
    padding-left: 15px;
    text-align: left;
    text-decoration: none;
    color: #484848;
    font-size: 14px;
    background-image: url(/img/weixuanzhong.png);
}

.m-c  .xuanzhong{
    background-image: url(/img/xuanzhong.png);
}
.m-c div>div>ul>li>h5 {
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 40px;
    font-size: 15px;
}
.searchquyu:hover{
    color:red;
    cursor: pointer;
}
.m-c div:nth-child(1) {
    width: 1190px;
    margin-bottom: 10px;
    background-color: #ffffff;
}

.t-h div ul li:nth-child(3) {
    background-color: #40c1a5;
    margin-left: 20px;
    font-size: 0;
}

.m-c .tag {
    display: inline-block;
    border-bottom: 0;
    padding: 0;
    max-width: 820px;
    margin-left: 100px;
}

.m-c .tag>ul>li {
    /* padding-right: 15px; */
    line-height: 20px;
    list-style: none;
    float: left;
    border: 1px solid red;
    margin: 4px 10px;
 
    background-image: url(/img/css_sprites.png);
    background-repeat: no-repeat;
    background-position: -80px -80px;
    background-size: 10px 10px;
    height: 20px;
}

.m-c .tag>ul>li>span:first-child {
    display: inline-block;
    padding: 0 7px;
}

.m-c .tag>ul>li>span:last-child {
    display: inline-block;
    background-image: url(/img/css_sprites.png);
    background-repeat: no-repeat;
    background-position: -134px -124px;
    width: 20px;
    color:white
}

.t-h div ul li {
    float: left;
    line-height: 38px;
    height: 40px;
    font-size: 0; 
    position:relative; 
}

.t-h div>ul>li input {
    margin-left: 30px;
    width: 590px;
    height: 30px;
    line-height: 30px;
    padding: 4px 14px;
    outline: none;
    border: #f1f1f1 solid 1px;
    background-color: #f6f6f6;
    font-size: 14px;
}
.t-h div>ul>li .shuchu{
    position:absolute;
    z-index:100;
    top:40px;
    left:30px;
    font-size:20px;
    width:618px;
    background-color:white;
    height:150px;
    border:1px solid #e2e2e2;
    overflow-y: auto;
    overflow-x:hidden;
}
.t-h div>ul>li .shuchu>ul{
    padding-top:0;
    width:600px;
    height:auto;
}
.t-h div>ul>li .shuchu>ul>li{
    margin-left:0;
    background-color:white;
    line-height:30px;
    padding:5px 15px;
    height:30px;
    font-size:14px;
    width:100%;
}
.tou li:nth-child(2) {
    width: 35px;
    text-align: center;
}

.san li {
    height: 55px;
    margin: 10px 0;
    text-align: center;
    line-height: 55px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 2px #cccccc;
}

#hid {
    position: relative;
}

.san>li>div {
    visibility: hidden;
}

.san>li>div>div:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 30px;
    background-color: #38393a;
    color: white;
    font-size: 14px;
    line-height: 30px;
}

.san>li>div>div:nth-child(2) {
    position: absolute;
    top: 7px;
    right: -16px;
    border: 8px solid #38393a;
    border-color: transparent transparent transparent #38393a;
}

.tou li:nth-child(1):hover {
    color: red;
    cursor: pointer;
}

.clear::after {
    content: '';
    display: block;
    clear: both;
}

.big>.bbg>ul {
    width: 1215px;
}

.big>.bbg {
    display: none;
}

.big>.bbg>ul>li {
    float: left;
    width: 380px;
    height: 370px;
    margin-right: 25px;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
}

.big>.bbg>ul>li:hover {
    box-shadow: 0px 0px 5px 0px #2e2d2d;
    cursor: pointer;
}

.big>.bbg>ul>li>div:nth-child(1)>img {
    border-radius: 5px 5px 0 0;
}

.big>.bbg>ul>li>div:nth-child(1)>img+div {
    height: 60px;
    visibility: inherit;
    opacity: 1;
    transition: .5s;
    line-height: 60px;
}

.big>.bbg>ul>li>div:nth-child(2) {
    height: 30px;
    padding: 5px 10px;
    background-color: #fff;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    color: #979798;
}

.big>.bbg>ul>li>div:nth-child(1) {
    position: relative;
}

.big>.bbg>ul>li>div:nth-child(1)>div {
    position: absolute;
    visibility: hidden;
    background-color: rgba(0,0,0,0.6);
    bottom: 5px;
    opacity: 0;
    width: 360px;
    padding: 0 10px;
    color: white;
    line-height: 30px;
}

.big>.bbg>ul>li>h3 {
    padding: 0 10px;
    margin: 0;
}

.big>.bbg>ul>li>h3>span {
    display: inline-block;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    background-color: #eef1f4;
    padding: 0 5px;
    color: #7f8c9c;
    border-radius: 2px;
    font-weight: 400;
    margin: 0 5px;
}

.big>.bbg>ul>li>div:nth-child(2)>span:first-child {
    background-image: url('/img/css_sprites.png');
    display: inline-block;
    width: 10px;
    background-repeat: no-repeat;
    background-position: -185px -100px;
}

.big>.bbg>ul>li>div:nth-child(2)>span:last-child {
    float: right;
    color: red;
    font-size: 18px;
}

.list {
    margin-top: 20px;
    width: 900px;
    position: relative;
    float: left;
}

.list>ul li {
    background-color: #fff;
    height: 150px;
    padding: 30px;
    margin-bottom: 20px;
}

.list>ul>li>div>div>h3>a {
    text-decoration: none;
    color: black;
    font-weight: 300;
}

.list>ul>li>div>p>span {
    display: inline-block;
    margin-right: 20px;
    padding-left: 20px;
    color: red;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: left;
}

.list>ul>li>div {
    float: left;
}

.list>ul>li>div:nth-child(2) {
    margin-left: 20px;
}

.tou li:nth-child(3) {
    margin-left: -15px;
}

body .onck {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#chos li:hover {
    background-color: #ededed;
}

#chos {
    position: relative;
    top: -60px;
    left: 30px;
    width: 154px;
    height: 58px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-top: 0;
    z-index: 500;
}

#chos li {
    cursor: pointer;
    height: 29px;
    padding-left: 10px;
    line-height: 29px;
    background-color: white;
}

body .onck>div {
    position: sticky;
    width: 700px;
    height: 400px;
    background-color: white;
    top: calc(50% - 200px);
    left: calc(50% - 350px);
    z-index: 1000;
    border-radius: 5px;
}

body .onck>div>div:nth-child(1) {
    margin: 0 auto;
    width: 600px;
    border-bottom: 1px solid #b6b1b1;
}

body .onck>div>div:nth-child(1) h2 {
    display: inline-block;
    padding: 25px 0;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
}

body .onck>div>div:nth-child(1) .fis {
    display: inline-block;
    margin-left: 290px;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span {
    cursor: pointer;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span:hover {
    color: red;
}

body .onck>div>div:nth-child(1) ul {
    list-style: none;
}

body .onck>div>div:nth-child(1) ul li {
    float: left;
}

body .onck>div>div:nth-child(2) {
    margin: 0 auto;
    width: 600px;
    height: 300px;
}

body .onck>div>div:nth-child(2) ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .onck>div>div:nth-child(2) ul li {
    width: 300px;
    float: left;
    margin: 15px 0;
}

body .onck>div>div:nth-child(2) ul li span {
    display: inline-block;
    width: 30px;
}

body .onck>div>div:nth-child(2) ul li a {
    margin-left: 20px;
    text-decoration: none;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(2) ul li a:hover {
    color: red;
}

body .onck>div>div:nth-child(3) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    right: 0;
    cursor: pointer;
}

body header div {
    height: 40px;
    background-color: #ee3843;
}

body header div div {
    font-size: 14px;
    height: 100%;
    margin: 0 auto;
    width: 1190px;
    color: #ffffff;
}

body header div div ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body header div div .h_left {
    width: 800px;
    float: left;
}

body header div div .h_left ul li:nth-child(1) {
    cursor: auto;
}

body header div div .h_left ul li {
    cursor: pointer;
    position: relative;
    line-height: 40px;
    float: left;
    margin: 0 25px;
}

body header div div .h_left ul li span:nth-child(1) {
    display: inline-block;
    width: 20px;
}

body header div div .h_left ul li a {
    color: #ffffff;
    text-decoration: none;
}

body header div div .h_left ul li:hover a {
    color: #fcd7d9;
}

body header div div .h_left ul li:after {
    content: '';
    width: 0;
    height: 3px;
    background: #ffffff;
    position: absolute;
    top: 93%;
    left: 50%;
    transition: .3s;
}

body header div div .h_left ul li:nth-child(2):hover:after,
body header div div .h_left ul li:nth-child(3):hover:after,
body header div div .h_left ul li:nth-child(4):hover:after,
body header div div .h_left ul li:nth-child(5):hover:after,
body header div div .h_left ul li:nth-child(6):hover:after,
body header div div .h_left ul li:nth-child(7):hover:after {
    left: 0%;
    width: 100%;
}

body header div div .h_right {
    width: 120px;
    float: right;
}

body header div div .h_right a {
    color: #ffffff;
    text-decoration: none;
    line-height: 40px;
    padding: 0 10px;
}

body header div div .h_right a:hover {
    cursor: pointer;
    color: #fcd7d9;
}

body footer .f_up {
    height: 190px;
    background-color: #d72a3a;
    background-position: center;
    position: relative;
}

body footer .f_up>div {
    margin: 0 auto;
    width: 1190px;
    height: 100%;
}

body footer .f_up>div div:nth-child(1) {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 21px;
}

body footer .f_up>div div:nth-child(2) {
    margin-left: 300px;
    width: 990px;
    height: 100%;
}

body footer .f_up>div div:nth-child(2) img {
    height: 150px;
    margin-top: 15px;
}

body footer .f_down {
    /* height: 720px; */
    background-color: #3b3d42;
}

body footer .f_down ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body footer .f_down>div {
    width: 1190px;
    height: 100%;
    margin: 0 auto;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2) {
    border-bottom: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p {
    margin: 5px 0;
    padding: 0;
    font-weight: 300;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p img {
    margin-bottom: -4px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p>span:nth-child(1) {
    display: inline-block;
    width: 300px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) {
    margin-top: 10px;
    width: 1190px;
    border-bottom: 0;
    color: #aaacb3;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(1) {
    float: left;
    width: 650px;
    border-right: 1px solid #595b5f;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) {
    float: right;
    width: 450px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) img {
    margin-left: 20px;
    margin-top: 15px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(1) {
    width: 250px;
    float: left;
    border-right: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(2) {
    width: 200px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a {
    text-decoration: none;
    color: #aaacb3;
    font-size: 18px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a:hover {
    color: #fff;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li {
    margin-right: 80px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p {
    font-weight: 500;
    margin: 5px 0;
    font-size: 16px;
    color: #8b8d92;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p:hover {
    color: white;
    cursor: pointer;
}

body footer .f_down>div>div>div {
    border-bottom: 1px solid #595b5f;
    padding-top: 20px;
    padding-bottom: 20px;
}

body footer .f_down>div>div>div ul {
    padding-top: 5px;
}

body footer .f_down>div>div>div>ul li {
    float: left;
    margin-right: 10px;
}

body footer .f_down>div>div>div>ul li a {
    text-decoration: none;
    color: #8b8d92;
}

body footer .f_down>div>div>div>ul li a:hover {
    color: #ffffff;
}

body footer .f_down>div>div>div::after {
    content: '';
    display: block;
    clear: both;
}

body footer .f_down>div p {
    text-align: left !important;
    margin: 0;
    font-weight: 600;
    color: #aaacb3;
}


/*# sourceMappingURL=moban.css.map */
</style>